<template>
  <div class="msite-gift">
    <div class="gift-title">新人大礼包 <span>注册即省￥1088</span></div>
    <div class="gift-ul-box">
      <div class="gift-ul">
        <div class="gift-li">
          <div class="gift-li-box" v-for="item in listData" :key="item.id">
            <div class="gift-money">{{item.price}}</div>
            <p>{{item.required}}</p>
            <p>{{item.nowGet}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "msiteGift",
  props: {
    listData: Array
  },
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.msite-gift {
  width: 100%;
  height: $height*4;
  background-color: $color;
  .gift-title {
    color: #fff;
    padding-left: 10px;
    box-sizing: border-box;
    span {
      color: orange;
      font-size: 8px;
    }
  }
  .gift-ul-box {
    overflow-x: scroll;
  }
  .gift-ul {
    width: 120%;
    height: $height*3;
    .gift-li {
      width: 100%;
      display: flex;
      justify-content: space-around;
      // overflow-x: scroll;
      overflow: hidden;
      .gift-li-box {
        width: $height*2.5;
        height: $height*2.5;
        background-color: rgb(247, 247, 247);
        border-radius: 10px;
        margin: 10px;
        text-align: center;
        .gift-money {
          font-size: 14px;
          line-height: $height*0.8;
          margin-top: 16px;
          &::before {
            content: '￥';
            font-size: 8px;
          }
        }
        p {
          &:nth-of-type(1) {
            font-size: 12px;
            line-height: $height*0.5;
          }
          &:nth-of-type(2) {
            transform: scale(0.5);
            font-size: 18px;
          }
        }
      }

    }
  }
}
// 去掉横向滚动条
::-webkit-scrollbar {
  width: 0px;
}
</style>